<template>
  <div class="allsearch">
    <section class="search-content">
      <el-row :gutter="4" type="flex" justify="start">
        <el-col :span="24">
          <el-select v-model="option1" placeholder="开票状态" style="width:120px" @change="handleFilter">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="option2" style="width:150px" @change="handleFilter">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input v-model="username" placeholder="申请人" style="width:200px" @keyup.enter.native="handleFilter"/>
          <el-input v-model="applyId" placeholder="申请编号" style="width:200px" @keyup.enter.native="handleFilter"/>
          <el-button type="primary" @click="handleFilter">搜索</el-button>
          <el-button size="medium" type="info" @click="clearParams">清空</el-button>
        </el-col>
      </el-row>
    </section>
    <div>
      <subtable
        v-loading="listLoading"
        :table-label="editLabel"
        :table-data="editData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
      />
      <pagination
        :total="total"
        :current-page="currentpage"
        :page-size="pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  import Subtable from '@/components/Eltable'
  import Pagination from '@/components/Pagination' // 分页组件
  import {getInvoiceList} from '@/api/deal/invoice' // 数据接口
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {
      Subtable,
      Pagination
    },
    data() {
      return {
        listLoading: false,
        total: 0,
        currentpage: 1,
        pagesize: 10,
        username: '',
        applyId: '',
        radio: '1',
        option1: '',
        option2: '',
        options1: [
          {
            label: '开票状态',
            value: ''
          },
          {
            label: '待处理',
            value: '待处理'
          },
          {
            label: '已开票',
            value: '已开票'
          },
          {
            label: '已拒绝',
            value: '已拒绝'
          }
        ],
        options2: [
          {
            label: '发票类型',
            value: ''
          },
          {
            label: '增值税专用发票',
            value: '增值税专用发票'
          },
          {
            label: '纸质普通发票',
            value: '纸质普通发票'
          },
          {
            label: '电子普通发票',
            value: '电子普通发票'
          }
        ],
        editLabel: [
          {
            label: '申请编号', width: '', prop: 'id'
          }, {
            label: '发票类型', width: '', prop: 'type'
          },
          {
            label: '申请人', width: '', prop: 'createdUserName'
          },
          {
            label: '发票金额', width: '', prop: 'amount'
          },
          {
            label: '申请时间', width: '', prop: 'createTimeTimeStr'
          },
          {
            label: '申请状态', width: '', prop: 'status'
          },
          {
            label: '操作人', width: '', prop: 'createdUserName'
          }
        ],
        editData: [],
        listFilter: []
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      handleSizeChange(val) {
        console.log(val);
        this.currentpage = 1;
        this.pagesize = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        console.log(val);
        this.currentpage = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleFilter() {
        this.editData = this.listFilter.filter(item => {
          if (this.option1 && item.status !== this.option1) return false;
          if (this.option2 && item.type !== this.option2) return false;
          if (this.username && item.createdUserName.toLowerCase().indexOf(this.username.toLowerCase()) === -1) return false;
          if (this.applyId && item.id.toString().toLowerCase().indexOf(this.applyId.toLowerCase()) === -1) return false;
          return true
        });
        this.total = this.editData.length
      },
      clearParams() {
        this.option1 = '';
        this.option2 = '';
        this.username = '';
        this.applyId = '';
        this.getData()
      },
      getData() {
        this.listLoading = true;
        getInvoiceList().then(response => {
          this.editData = response.data.items.filter(item => {
            if (item.tenantId !== getTenantId()) return false;
            return true
          });
          this.editData.map(item => {
            if (item.status === 'pend') item.status = '待处理';
            if (item.status === 'agreed') item.status = '已开票';
            if (item.status === 'refused') item.status = '已拒绝';
            if (item.type === 'vat') item.type = '增值税专用发票';
            if (item.type === 'paper') item.type = '纸质普通发票';
            if (item.type === 'electronic') item.type = '电子普通发票';
          });
          this.listFilter = this.editData;
          this.total = this.editData.length;
          this.listLoading = false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .allsearch {
    margin-top: 0;
    padding: 0;

    .search-content {
      width: 100%;
    }
  }
</style>
